import { useState } from 'react'
import { Input, Button, Typography, Space, Card } from 'antd'
import { CalculatorOutlined } from '@ant-design/icons'
import { motion } from 'framer-motion'

const { Text, Title } = Typography

const BMICalculator = () => {
  const [height, setHeight] = useState('')
  const [weight, setWeight] = useState('')
  const [bmi, setBmi] = useState<number | null>(null)
  const [isCalculating, setIsCalculating] = useState(false)

  const calculateBMI = () => {
    const h = parseFloat(height) / 100
    const w = parseFloat(weight)
    if (h > 0 && w > 0) {
      setIsCalculating(true)
      // 添加一个小延迟使动画效果更明显
      setTimeout(() => {
        const bmiValue = w / (h * h)
        setBmi(parseFloat(bmiValue.toFixed(1)))
        setIsCalculating(false)
      }, 300)
    }
  }

  const getBMIStatus = (bmi: number) => {
    if (bmi < 18.5) return { text: '偏瘦', color: '#faad14' }
    if (bmi < 24) return { text: '正常', color: '#52c41a' }
    if (bmi < 28) return { text: '偏胖', color: '#faad14' }
    return { text: '肥胖', color: '#f5222d' }
  }

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      calculateBMI()
    }
  }

  return (
    <Space direction="vertical" className="w-full" size="large">
      <motion.div
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
      >
        <Space.Compact className="w-full">
          <Input
            prefix="身高"
            suffix="cm"
            type="number"
            value={height}
            onChange={(e) => setHeight(e.target.value)}
            onKeyPress={handleKeyPress}
            placeholder="请输入身高"
          />
          <Input
            prefix="体重"
            suffix="kg"
            type="number"
            value={weight}
            onChange={(e) => setWeight(e.target.value)}
            onKeyPress={handleKeyPress}
            placeholder="请输入体重"
          />
          <Button
            type="primary"
            onClick={calculateBMI}
            icon={<CalculatorOutlined className={isCalculating ? 'animate-spin' : ''} />}
            loading={isCalculating}
          >
            计算
          </Button>
        </Space.Compact>
      </motion.div>

      {bmi !== null && (
        <motion.div
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.3 }}
        >
          <Card className="w-full text-center bg-gray-50">
            <Space direction="vertical" size="small">
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.2, duration: 0.3 }}
              >
                <Title level={2} className="!mb-0">
                  {bmi}
                </Title>
              </motion.div>
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.4, duration: 0.3 }}
              >
                <Text type="secondary">BMI 指数</Text>
              </motion.div>
              <motion.div
                initial={{ opacity: 0, scale: 0.5 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ delay: 0.6, duration: 0.3 }}
              >
                <Text style={{ color: getBMIStatus(bmi).color }} strong className="text-lg">
                  {getBMIStatus(bmi).text}
                </Text>
              </motion.div>
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.8, duration: 0.3 }}
              >
                <Text type="secondary" className="text-sm">
                  {bmi < 18.5 && '建议适当增加营养摄入'}
                  {bmi >= 18.5 && bmi < 24 && '继续保持健康的生活方式'}
                  {bmi >= 24 && bmi < 28 && '建议控制饮食，增加运动'}
                  {bmi >= 28 && '建议在医生指导下进行减重'}
                </Text>
              </motion.div>
            </Space>
          </Card>
        </motion.div>
      )}
    </Space>
  )
}

export default BMICalculator 